<template>

  <el-row>
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body :before-close="close">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="demo-ruleForm">
        <!--      <el-form-item v-if="!isLoad" label="商品和包装" prop="packing_id">-->
        <!--        <el-cascader-->
        <!--          v-model="form.packing_id"-->
        <!--          placeholder="请选择商品和包装"-->
        <!--          :options="selectData"-->
        <!--          clearable-->
        <!--          filterable-->
        <!--          style="width: 100%"-->
        <!--        />-->
        <!--      </el-form-item>-->
        <!--      <el-form-item v-if="isLoad" label="商品和包装">-->
        <!--        <el-cascader-->
        <!--          disabled-->
        <!--          placeholder="加载中..."-->
        <!--          style="width: 100%"-->
        <!--        />-->
        <!--      </el-form-item>-->
        <el-form-item label="商品和包装" prop="packing_id">
          <div style="display: inline-block;width: 50%;" @click="selGoods()">
            <el-input v-model="form.goods_name" type="text"  readonly />
          </div>
<!--          <el-select-->
<!--            v-model="form.goods_name"-->
<!--            filterable-->
<!--            placeholder="商品"-->
<!--            clearable-->
<!--            style="width: 50%"-->
<!--            @change="getPacking(1)"-->
<!--          >-->
<!--            <el-option v-for="(item, index) in selectPro" :key="index" :label="item.label" :value="item.value" />-->
<!--          </el-select>-->
          <el-select v-model="form.packing_id" filterable placeholder="包装" clearable style="width: 50%">
            <el-option v-for="(item, index) in selectPick" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item v-if="showSku" label="SKU">
          <span>{{ sku }}</span>
        </el-form-item>

        <el-form-item prop="number">
          <span slot="label">
            商品数量
          </span>
          <el-input v-model="form.number" type="number" :min="1" @input="selectNum()" />
        </el-form-item>

<!--        <el-form-item label="实际规格">-->
<!--          <span>{{ stary }} 托 {{ box }} 箱</span>-->
<!--        </el-form-item>-->

<!--        <el-form-item class="width-ku">-->
<!--          <span slot="label">-->
<!--            落地库位-->
<!--          </span>-->
<!--          <el-radio v-model="radio" label="1" @input="changeKW()">存储</el-radio>-->
<!--          <el-radio v-model="radio" label="2" @input="changeKW()">隔离</el-radio>-->
<!--          <el-radio v-model="radio" label="3" @input="changeKW()">暂放</el-radio>-->

<!--        </el-form-item>-->

        <el-form-item>
          <span slot="label">
            选择库区
          </span>
          <el-cascader
            v-model="value"
            :options="options"
            :props="props"
            @change="handleChange"
          />
          <span v-if="defind" style="margin-left: 5px;">当前库区没有库位</span>
        </el-form-item>

<!--        <el-form-item>-->
<!--          <span slot="label">-->
<!--            栈板号-->
<!--          </span>-->
<!--          <el-input v-model="form.pallet_no" />-->
<!--        </el-form-item>-->

<!--        <el-form-item>-->
<!--          <span slot="label">-->
<!--            lot01-->
<!--          </span>-->
<!--          <el-input v-model="form.lot01" />-->
<!--        </el-form-item>-->

<!--        <el-form-item>-->
<!--          <span slot="label">-->
<!--            lot02-->
<!--          </span>-->
<!--          <el-input v-model="form.lot02" />-->
<!--        </el-form-item>-->

        <el-form-item>
          <span slot="label">
            商品剩余数
          </span>
          <el-input :value="surplus" disabled />
        </el-form-item>

        <el-row style="top: 30px;margin-bottom: 30px;text-align:center;">
          <el-col :span="24">
            <el-button type="primary" size="medium" @click="submitForm('form')">{{ title }}</el-button>
            <el-button size="medium" @click="close()">取消</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

    <template v-if="open1">
      <el-row>
        <el-button
          v-if="form.status != '1'"
          size="mini"
          type="danger"
          icon="el-icon-refresh"
          @click="editBtnDisabled = !editBtnDisabled"
        >编辑</el-button>
        <el-button
          v-if="form.status != '1'"
          type="primary"
          style="margin-left: 0;"
          size="mini"
          :disabled="editBtnDisabled"
          @click="submitForm('form1')"
        >
          保存
        </el-button>
<!--       form.pallet_no_list.length===0  -->
        <el-button
          v-if="form.status !== '1'"
          style="margin-left: 0;"
          size="mini"
          type="primary"
          @click="seat(form)"
        >库位选择
        </el-button>
<!--        <el-button-->
<!--          v-if="form.status != '1'"-->
<!--          style="margin-left: 0;"-->
<!--          size="mini"-->
<!--          type="warning"-->
<!--          @click="seatImport(form)"-->
<!--        >库位选择（批量）-->
<!--        </el-button>-->
        <!--        <el-button-->
        <!--          style="margin-left: 0;"-->
        <!--          size="mini"-->
        <!--          type="info"-->
        <!--          @click="handwork(form)"-->
        <!--        >手工分配-->
        <!--        </el-button>-->
        <el-button
          style="margin-left: 0;"
          size="mini"
          type="success"
          @click="tray(form)"
        >托盘信息
        </el-button>

      </el-row>

    </template>

    <el-form
      v-if="open1"
      ref="form1"
      :disabled="editBtnDisabled"
      size="mini"
      :model="form"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >

      <el-row>
        <el-col style="border-right: 1px solid #efe9e9;padding: 0 50px;" :span="12">

          <el-row>
            <el-col :span="12">
              <el-form-item label="成品料号" prop="packing_id" class="sp-width">
<!--                <el-input v-model="form.goods_name" readonly @click="selGoods"/>-->
                <el-select
                  v-model="form.serial_number"
                  filterable
                  placeholder="成品料号"
                  clearable

                >
                  <!--                  @change="getPacking(1)"-->
                  <el-option v-for="(item, index) in selectPro" :key="index" :label="item.label" :value="item.value" />
                </el-select>

              </el-form-item>
              <el-form-item>
                <span slot="label">
                  SKU
                </span>
                <el-input v-model="form.sku" disabled />
              </el-form-item>
              <el-form-item>
                <span slot="label">
                  商品描述
                </span>
                <el-input v-model="form.describe" disabled />
              </el-form-item>
              <el-form-item>
                <span slot="label">
                  商品中文名称
                </span>
                <el-input v-model="form.goods_Cname" disabled />
              </el-form-item>
<!--              <el-form-item>-->
<!--                <span slot="label">-->
<!--                  商品英文名称-->
<!--                </span>-->
<!--                <el-input v-model="form.goods_Ename" disabled />-->
<!--              </el-form-item>-->
              <el-form-item>
                <span slot="label">
                  HSCODE
                </span>
                <el-input v-model="form.HSCODE" disabled />
              </el-form-item>
              <el-form-item>
                <span slot="label">
                  项号
                </span>
                <el-input v-model="form.new_item_number" disabled />
              </el-form-item>
              <el-form-item>
                <span slot="label">
                  落地库位
                </span>
                <!-- <el-radio v-model="radio" label="1" @input="changeKW()">存储</el-radio>
                <el-radio v-model="radio" label="2" @input="changeKW()">隔离</el-radio>
                <el-radio v-model="radio" label="3" @input="changeKW()">暂放</el-radio> -->
                <el-select v-model="radio" placeholder="请选择" @change="changeKW">
                  <el-option label="存储" value="1" />
<!--                  <el-option label="隔离" value="2" />-->
<!--                  <el-option label="暂放" value="3" />-->
                </el-select>

              </el-form-item>

              <el-form-item>
                <span slot="label">
                  选择库区
                </span>
                <el-cascader
                  v-model="value"
                  :options="options"
                  :props="props"
                  @change="handleChange"
                />
                <span v-if="defind" style="margin-left: 5px;">当前库区没有库位</span>
              </el-form-item>

            </el-col>
            <el-col :span="12">
<!--              <el-form-item>-->
<!--                <span slot="label">-->
<!--                  料号体系-->
<!--                </span>-->
<!--                <el-input v-model="form.item_number_system" disabled />-->
<!--              </el-form-item>-->
              <el-form-item>
                <span slot="label">
                  供应商
                </span>
                <el-input v-model="form._supplier_name" disabled />
              </el-form-item>
              <el-form-item>
                <span slot="label">
                  制造商
                </span>
                <el-input v-model="form._manufacturer_name" disabled />
              </el-form-item>
            </el-col>
          </el-row>

        </el-col>
        <el-col :span="12" style="padding: 0 50px;">

          <el-row>
            <el-col :span="12">
              <el-form-item prop="number">
                <span slot="label">
                  商品数量
                </span>
                <el-input v-model="form.number" :min="1" type="number" @input="selectNum()" />
              </el-form-item>
              <el-form-item label="包装">
                <el-select v-model="form.packing_id" filterable placeholder="包装" clearable>
                  <el-option v-for="(item, index) in selectPick" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <span slot="label">
                  栈板号
                </span>
<!--                <el-input v-model="form.pallet_no"/>-->
                <el-input
                  type="textarea"
                  placeholder="显示已生成的栈板号，不可操作!"
                  v-model="form.pallet_no_list"
                  style="font-size: 16px"
                />
              </el-form-item>
<!--              <el-form-item label="栈板号条形码" style="margin-top: 10px;">-->
<!--                <el-image-->
<!--                  style="width: 170px; height: 30px;background-color: #fff;"-->
<!--                  :src="form.pallet_no_img"-->
<!--                  :preview-src-list="[form.pallet_no_img]"-->
<!--                  fit="contain"-->
<!--                  z-index="550"-->
<!--                />-->
<!--              </el-form-item>-->
              <el-form-item label="SN码" style="margin-top: 10px;">
                <el-input
                  type="textarea"
                  placeholder="显示已录的SN码，不可操作!"
                  v-model="form.sn_list"
                  style="font-size: 16px"
                />
              </el-form-item>

<!--              <el-form-item>-->
<!--                <span slot="label">-->
<!--                  PO-->
<!--                </span>-->
<!--                <el-input v-model="form.PO" />-->
<!--              </el-form-item>-->

<!--              <el-form-item>-->
<!--                <span slot="label">-->
<!--                  CO-->
<!--                </span>-->
<!--                <el-input v-model="form.CO" />-->
<!--              </el-form-item>-->
<!--              <el-form-item>-->
<!--                <span slot="label">-->
<!--                  SN-->
<!--                </span>-->
<!--                <el-input v-model="form.SN" />-->
<!--              </el-form-item>-->

            </el-col>
<!--            <el-col :span="12">-->
<!--              <el-form-item>-->
<!--                <span slot="label">-->
<!--                  DO-->
<!--                </span>-->
<!--                <el-input v-model="form.DO" />-->
<!--              </el-form-item>-->
<!--              <el-form-item>-->
<!--                <span slot="label">-->
<!--                  LOT1-->
<!--                </span>-->
<!--                <el-input v-model="form.lot01" />-->
<!--              </el-form-item>-->

<!--              <el-form-item>-->
<!--                <span slot="label">-->
<!--                  LOT2-->
<!--                </span>-->
<!--                <el-input v-model="form.lot02" />-->
<!--              </el-form-item>-->
<!--              <el-form-item>-->
<!--                <span slot="label">-->
<!--                  LOT3-->
<!--                </span>-->
<!--                <el-input v-model="form.LOT3" />-->
<!--              </el-form-item>-->
<!--            </el-col>-->

          </el-row>

        </el-col>
      </el-row>

      <!-- <el-form-item v-if="showSku" label="SKU">
        <span>{{ sku }}</span>
      </el-form-item> -->

      <!-- <el-form-item label="实际规格">
        <span>{{ stary }} 托 {{ box }} 箱</span>
      </el-form-item> -->

      <!-- <el-form-item>
        <span slot="label">
          商品剩余数
        </span>
        <el-input :value="surplus" disabled />
      </el-form-item> -->

      <el-row style="text-align:center;">
        <el-col :span="24">
          <!--          <el-button type="primary" size="medium" @click="submitForm('form1')">{{ title }}</el-button>-->
          <!--          <el-button size="medium" @click="close()">取消</el-button>-->
        </el-col>
      </el-row>
    </el-form>

    <!-- 库位选择 -->
    <Seat :opens.sync="opens" :title="title" :form="form" :surplus="surplus" />

    <!-- 库位选择 -->
    <Product :openx.sync="openx" :title="title" :form="form" />

    <!--    <HandWork :openh.sync="openh" :title="title" :form="form" :surplus="surplus" />-->

    <SeatImport v-if="importOpen" :import-open.sync="importOpen" :form="form" :dialog-title="importDialogTitle" :warehousing-son-id="import_warehousing_son_id" />
    <ProductDialog :visible.sync="dialogVisible" :on-confirm="handleConfirm" :diaclose="diaclose"/>
  </el-row>
</template>
<style>

/* 使用深度选择器 */
.el-image-viewer__mask {
  background-color: #fff !important;
  opacity: 1 !important;
}
.el-textarea.is-disabled .el-textarea__inner {
  background-color: #fff;
  border-color: #747272;
  color: #07399b;
  cursor: not-allowed;
  font-size: 16px;
}
</style>
<script>
import { warehousingSonAdd, warehousingSonEdit, getKwList, traySurplus } from '@/api/storehouse'
import { getGPSelect, getGoods, getPacking } from '@/api/product'
import Seat from '@/views/storehouse/warehousingGoods/Seat'
import Product from '@/views/storehouse/warehousingGoods/product'
import SeatImport from '@/views/storehouse/warehousingGoods/SeatImport'
import HandWork from '@/views/storehouse/warehousingGoods/HandWork.vue'
import ProductDialog from '@/components/ProductDialog/index.vue'
export default {
  name: 'AddEdit',
  components: {
    HandWork,
    SeatImport,
    Seat,
    ProductDialog,
    Product },
  props: {
    open: {
      type: Boolean
    },
    open1: {
      type: Boolean,
      default: true
    },
    form: {
      type: Object
    },
    title: {
      type: String
    },
    warehousing_id: {
      type: [String, Boolean, Number]
    },
    num: {
      type: Number
    },
    old_num: {
      type: Number
    },
    warehousing_son_id: {
      type: [String, Boolean, Number]
    }
  },
  data() {
    return {
      import_warehousing_son_id: '',
      importOpen: false,
      importDialogTitle: '',
      rules: {
        goods_id: [
          { required: true, message: '请选择商品和包装', trigger: 'change' }
        ],
        packing_id: [
          { required: true, message: '请选择包装', trigger: 'change' }
        ],
        number: [
          { required: true, message: '填写商品数量', trigger: 'blur' }
        ]
      },
      editBtnDisabled: true,
      opens: false,
      openx: false,
      openh: false,
      selectPro: [],
      selectPick: [],
      isLoad: true,
      selectData: [],
      radio: '1',
      props: { 'value': 'id', 'label': 'name' },
      options: [],
      value: [9544, 9545],
      defind: false,
      keyValue: 0,
      showSku: false,
      sku: '',
      dialogVisible: false
    }
  },
  computed: {
    surplus() {
      if (this.title == '编辑') {
        return this.num + this.old_num - this.form.number
      } else {
        if (this.form.number) {
          return this.num - parseInt(this.form.number)
        } else {
          return this.num
        }
      }
    },

    stary() {
      console.log(this.selectPick, this.form.number)
      var num = 0
      this.selectPick.forEach(item => {
        if (item.value === this.form.packing_id) {
          num = Math.ceil((this.form.number / item.packing_num) / item.layup_num)
        }
      })
      if (isNaN(num)) {
        return 0
      } else {
        return num
      }
    },
    box() {
      var num = 0
      this.selectPick.forEach(item => {
        if (item.value === this.form.packing_id) {
          num = Math.ceil(this.form.number / item.packing_num)
        }
      })
      if (isNaN(num)) {
        return 0
      } else {
        return num
      }
    }
  },
  watch: {
    surplus(val) {
      if (parseInt(val) < 0) {
        this.form.number = 0
      }
    },
    title: {
      handler(newValue, oldValue) {
        if (newValue == '编辑') {
          this.radio = this.form.checked_config_status
        }
      },
      immediate: true
    },
    warehousing_son_id: {
      handler(newValue, oldValue) {
        if (newValue != '' && this.title == '编辑') {
          this.radio = this.form.checked_config_status
          this.value = this.form.checked_config
          this.selectPick = this.form.packing_list
        }
      },
      immediate: true
    },
    open() {
      console.log('open')
      getKwList(this.warehousing_id).then(res => {
        if (res.code === 10000) {
          this.usageList1 = res.data.usage_1
          this.usageList2 = res.data.usage_2
          this.usageList3 = res.data.usage_3
          this.options = res.data.usage_1
          if (this.options.length === 0) {
            this.defind = true
          }
        }
      })
    }
  },
  created() {
    //this.getGoods()
  },
  mounted() {
    const w_id = this.form.warehousing_id || this.warehousing_id
    if (w_id) {
      getKwList(this.form.warehousing_id || this.warehousing_id).then(res => {
        if (res.code === 10000) {
          this.usageList1 = res.data.usage_1
          this.usageList2 = res.data.usage_2
          this.usageList3 = res.data.usage_3
          this.options = res.data.usage_1
          if (this.options.length === 0) {
            this.defind = true
          }
          // this.value = this.form.checked_config
        }
      })
    }
  },
  methods: {
    selGoods() {
      this.dialogVisible = true
    },
    handleConfirm(val) {
      this.form.goods_name = val.goods_name
      this.form.goods_id = val.goods_id
      this.selectPick = []
      //this.form.packing_id = ''
      getPacking({ goods_name: this.form.goods_name,goods_id:val.goods_id }).then(response => {
        if (response.code === 10000) {
          var data = JSON.parse(JSON.stringify(response.data))
          data.forEach((item) => {
            item.label = item.label
            item.value = item.packing_id
          })
          this.selectPick = data
        }
      })
      this.dialogVisible = false
    },
    diaclose(){
      this.dialogVisible = false
    },
    ////
    andleConfirm(val){
      console.log('yes',val)
    },
    handwork(row) {
      const val = row.warehousing_son_id
      traySurplus({ warehousing_son_id: val }).then(response => {
        if (response.code === 10000) {
          this.surplus = response.data.number
          this.packing_num = response.data.packing_num
          this.form = JSON.parse(JSON.stringify(row))
          console.log('form', this.form)
          // this.title = '库位选择'
          this.openh = true
          this.loadings = false
        }
      })
    },
    seatImport(row) {
      // console.log('warehousing_son_id', this.warehousing_son_id)
      this.import_warehousing_son_id = row.warehousing_son_id
      this.importOpen = true
    },
    /** 库位选择按钮操作 */
    seat(row) {
      this.surplusGoods(row.warehousing_son_id, row)
    },
    selectNum() {
      // console.log(1);
    },
    surplusGoods(val, row) {
      this.loadings = true
      // 剩余商品入库数量
      traySurplus({ warehousing_son_id: val }).then(response => {
        if (response.code === 10000) {
          this.surplus = response.data.number
          this.packing_num = response.data.packing_num
          this.form = JSON.parse(JSON.stringify(row))
          // this.title = '库位选择'
          this.opens = true
          this.loadings = false
        }
      })
    },
    changeKW() {
      console.log(this.usageList1, this.usageList2, this.usageList3)
      if (this.radio === '1') {
        this.value = []
        this.options = this.usageList1
        if (this.options.length === 0) {
          this.defind = true
          this.value = []
        } else {
          this.defind = false
        }
      } else if (this.radio === '2') {
        this.value = []
        this.options = this.usageList2
        if (this.options.length === 0) {
          this.defind = true
          this.value = []
        } else {
          this.defind = false
        }
      } else if (this.radio === '3') {
        this.value = []
        this.options = this.usageList3
        if (this.options.length === 0) {
          this.defind = true
          this.value = []
        } else {
          this.defind = false
        }
      }
    },
    handleChange(value) {
      console.log(value)
    },
    tray(row) {
      this.$router.push({
        path: '/storehouse/tray',
        query: { warehousing_id: row.warehousing_id, warehousing_son_id: row.warehousing_son_id, status: row.status, page_date: new Date().getTime() }
      })
    },
    /** 初始：查询商品 */
    getGoods() {
      const that = this
      this.isLoad = true
      getGoods().then(response => {
        if (response.code === 10000) {
          that.selectPro = JSON.parse(JSON.stringify(response.data))
          that.selectPro.forEach((item) => {
            item.label = item.goods_name
            item.value = item.goods_name
            this.isLoad = false
          })
        }
      })
    },
    /** 动态获取商品规格 */
    getPacking(type) {
      if (type == 1) {
        delete (this.form.packing_id)
        this.selectPro.forEach(item => {
          if (this.form.goods_name == item.goods_name) {
            this.form.goods_id = item.goods_id
          }
        })
      }
      this.showSku = true
      this.selectPro.forEach((item) => {
        if (item.goods_name == this.form.goods_name) {
          this.sku = item.sku
        }
      })
      const that = this
      getPacking({ goods_name: this.form.goods_name }).then(response => {
        if (response.code === 10000) {
          var data = JSON.parse(JSON.stringify(response.data))
          data.forEach((item) => {
            item.label = item.label
            item.value = item.packing_id
          })
          this.selectPick = data
        }
      })
    },
    submitForm(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (that.title === '添加') {
            this.add()
          } else {
            this.edit()
          }
          this.editBtnDisabled = true
        } else {
          return false
        }
      })
    },
    add() {
      const that = this
      console.log(this.value[0])
      if (this.value[0] === undefined) {
        this.$notify.error('请选择库位')
        return
      }
      const info = {
        goods_name: this.form.goods_name,
        goods_id: this.form.goods_id,
        warehousing_id: this.warehousing_id,
        packing_id: this.form.packing_id,
        number: this.form.number,
        batch_number: this.form.batch_number,
        lot01: this.form.lot01,
        lot02: this.form.lot02,
        warehousing_son_config_attribute: this.radio + ',' + this.value[1]
      }
      warehousingSonAdd(info).then(response => {
        if (response.code === 10000) {
          that.$notify.success(response.message)
          that.$parent.getList()
          that.$emit('update:open', false)
        }
        this.$emit('childEvent')
      })
    },
    edit() {
      const that = this
      if (Array.isArray(this.form.packing_id) === true) {
        // this.form.goods_id = this.form.packing_id[0]
        this.form.packing_id = this.form.packing_id[1]
      }
      console.log(this.form)
      const info = {
        id: this.form.id,
        goods_id: this.form.goods_id,
        warehousing_id: this.warehousing_id || this.form.warehousing_id,
        packing_id: this.form.packing_id,
        number: this.form.number,
        batch_number: this.form.batch_number,
        pallet_no: this.form.pallet_no,
        lot01: this.form.lot01,
        lot02: this.form.lot02,
        warehousing_son_config_attribute: this.radio + ',' + this.value[1],
        PO: this.form.PO,
        DO: this.form.DO,
        CO: this.form.CO,
        SN: this.form.SN,
        LOT3: this.form.LOT3
      }
      warehousingSonEdit(info).then(response => {
        if (response.code === 10000) {
          that.$notify.success(response.message)
          that.$parent.getList()
          that.$emit('update:open', false)
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    close() {
      this.$emit('update:open', false)
    },
    getProductpPcking() {
      const that = this
      getGPSelect().then(response => {
        if (response.code === 10000) {
          this.selectData = JSON.parse(JSON.stringify(response.data))
          that.selectList(this.selectData)
        }
      })
    },
    /* 处理数据 */
    selectList(data) {
      const replaceKey = function(data) {
        data.forEach(function(row, index, arr) {
          if (row.children !== undefined) {
            const temp = { label: row.goods_name, value: row.goods_id }
            if (row.children.length > 0) {
              temp['children'] = []
              row.children.forEach(item => {
                const info = {
                  label: '包装数量(' + item.packing_num + ')--包装单位(' + item.unit_name + ')',
                  value: item.packing_id
                }
                temp['children'].push(info)
              })
            }
            arr[index] = temp
            if (arr[index].children && arr[index].children.length > 0) {
              replaceKey(arr[index].children)
            }
          }
        })
      }
      replaceKey(data)
      this.isLoad = false
    }
  }
}
</script>

